<template>
  <el-button type="primary" @click="addNewConfig">新增</el-button>

  <!-- 显示内容的表格 -->
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="id" prop="id" />
    <el-table-column label="cmd" prop="cmd" />
    <el-table-column label="param" prop="param" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>


  <el-button type="primary" @click="refreshInfo">刷新</el-button>

  <el-dialog v-model="dialogFormVisible" title="新配置" width="500">
    <el-form :model="form">
      <el-form-item style="display: none;">
        <el-input v-model="idValue" autocomplete="off" />
      </el-form-item>
      <el-form-item label="cmd值">
        <el-input v-model="cmdValue" autocomplete="off" />
      </el-form-item>
      <el-form-item label="参数">
        <el-input v-model="paramValue" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="insertOrUpdate()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 弹窗消息 -->
  <!-- <el-button :plain="false" @click="open2">Success</el-button> -->


</template>

<script>

export default {
  data() {
    return {
      search: '',
      filterTableData: [],
      dialogFormVisible: false,
      cmdValue: '',
      paramValue: '',
      idValue: 0
    };
  },
  methods: {
    refreshInfo() {
      // 方法逻辑
      const func = async () => {
        const response = await window.electron.ipcRenderer.invoke('dbCmdConfig', 'query:SELECT * FROM cmd_table;');
        console.log(response) // prints out 'pong'
        this.filterTableData = response;
      }
      func();
    },
    handleEdit(index, row) {

      //回显以及显示弹窗
      this.idValue = row.id;
      this.cmdValue = row.cmd;
      this.paramValue = row.param;
      this.dialogFormVisible = true;
    },
    handleDelete(index, row) {

      const func = async () => {
        let sql_string = 'DELETE FROM cmd_table WHERE id = ' + row.id;
        const response = await window.electron.ipcRenderer.invoke('dbCmdConfig', 'delete:' + sql_string);
        console.log("delete:" + response)
        this.refreshInfo();
      }
      func();
      console.log(index, row)
    },
    addNewConfig() {

      //添加一个配置
      this.dialogFormVisible = true;
      this.idValue = 0;


    },
    insertOrUpdate() {

      if (this.idValue === 0) { //新增
        //新增一行记录
        let sql_string = "INSERT INTO cmd_table (cmd, param) VALUES (" + JSON.stringify(this.cmdValue) + "  ,  " + JSON.stringify(this.paramValue) + " );"
        console.log(sql_string)
        window.electron.ipcRenderer.invoke('dbCmdConfig', 'add:' + sql_string).then(
          (response) => {
            console.log(response) 
            this.refreshInfo();
            this.dialogFormVisible = false;
            this.$message({message:'插入成功',type:"success"});
          }
        ).catch((err)=>{
          console.log( "错误"+ err)
        });

        // const func = async () => {
        //   let sql_string = "INSERT INTO cmd_table (cmd, param) VALUES (" + JSON.stringify(this.cmdValue) + "  ,  " + JSON.stringify(this.paramValue) + " );"
        //   const response = await window.electron.ipcRenderer.invoke('dbCmdConfig', 'add:' + sql_string);
        //   console.log(response) 
        //   this.refreshInfo();
        //   this.dialogFormVisible = false;
        //   this.$message({message:'插入成功',type:"success"});
        // }
        // func();

      }else{
        const func = async () => {
          let sql_string = 'UPDATE cmd_table SET cmd = ' + JSON.stringify(this.cmdValue) + ' , param = ' + JSON.stringify(this.paramValue) + ' WHERE id = ' + this.idValue;
          console.log(sql_string)
          const response = await window.electron.ipcRenderer.invoke('dbCmdConfig', 'edit:' + sql_string);
          console.log(response)
          this.refreshInfo();
          this.dialogFormVisible = false;
          this.$message({message:'更新成功',type:"success"});
        }

        func();

      }

  }
},
mounted() {
  this.refreshInfo();
}
}

</script>
